<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格标签</title>
</head>
<body>
  <!-- 这个文件将演示表格标签的常规用法 -->
  <!-- 表格标签由table、tr、th、td组成，thead、tbody、tfoot是表格的头部、主体、尾部 -->
  <!-- 数据单元格即 td 可以包含文本、图片、列表、段落、表单、水平线、表格等等。 -->
  <!-- 使用 "&nbsp;" 处理没有内容的单元格 -->
  <!-- 使用 "colspan" 属性来跨行合并单元格，使用 "rowspan" 属性来跨列合并单元格 -->
  <!-- 使用 "border" 属性来设置表格边框的宽度，使用 "cellspacing" 属性来设置单元格之间的间距，使用 "cellpadding" 属性来设置单元格内容与边框之间的间距 -->
  <!-- 使用 "caption" 标签来添加表格标题 -->
  <!-- 使用 "thead" 标签来添加表格头部 -->
  <!-- 使用 "tbody" 标签来添加表格主体 -->
  <!-- 使用 "tfoot" 标签来添加表格尾部 -->
  <!-- 使用 "align" 属性来设置表格的对齐方式，使用 "valign" 属性来设置单元格内容的垂直对齐方式 -->
  <!-- 使用 "bgcolor" 属性来设置表格的背景颜色，使用 "background" 属性来设置表格的背景图片 -->
  <!-- 使用 "width" 属性来设置表格的宽度，使用 "height" 属性来设置表格的高度 -->
  <!-- 使用 "scope" 属性来定义表头单元格与数据单元格之间的关系 -->
  <!-- colgroup 标签用于对表格中的列进行分组，以便统一设置列的样式。 -->
  <!-- 使用 "frame" 属性来控制围绕表格的边框。box 四周 above上 below下 hsides上下 vsides左右  -->
  
  <table border="1" cellpadding="10" cellspacing="0" width="500" height="300" align="center" bgcolor="#f5f5f5" background="https://www.baidu.com/img/flexible/logo/pc/result.png">
    <caption>表格标题</caption>
    <colgroup>
      <col span="1" style="background-color:red">
      <col style="background-color:yellow">
    </colgroup>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
      </tr>
      <tr>
        <td rowspan="2">单元格4</td>
        <td>单元格5</td>
        <td>单元格6</td>
      </tr>
      <tr>
        <td>单元格7</td>
        <td>单元格8</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>总计</td>
        <td colspan="2">12</td>
      </tr>
    </tfoot>
  </table>
  <br />
  <div align="center">frame属性</div>
  <table frame="box" align="center">
    <caption>box</caption>
    <tr>
      <th>111</th>
      <th>222</th>
      <th>333</th>
    </tr>
    <tr>
      <th>aaa</th>
      <th>sss</th>
      <th>ddd</th>
    </tr>
  </table>
  <br />
  <table frame="above" align="center">
    <caption>above</caption>
    <tr>
      <th>111</th>
      <th>222</th>
      <th>333</th>
    </tr>
    <tr>
      <th>aaa</th>
      <th>sss</th>
      <th>ddd</th>
    </tr>
  </table>
  <br />
  <table frame="below" align="center">
    <caption>below</caption>
    <tr>
      <th>111</th>
      <th>222</th>
      <th>333</th>
    </tr>
    <tr>
      <th>aaa</th>
      <th>sss</th>
      <th>ddd</th>
    </tr>
  </table>
  <br />
  <table frame="hsides" align="center">
    <caption>hsides</caption>
    <tr>
      <th>111</th>
      <th>222</th>
      <th>333</th>
    </tr>
    <tr>
      <th>aaa</th>
      <th>sss</th>
      <th>ddd</th>
    </tr>
  </table>
  <br />
  <table frame="vsides" align="center">
    <caption>vsides</caption>
    <tr>
      <th>111</th>
      <th>222</th>
      <th>333</th>
    </tr>
    <tr>
      <th>aaa</th>
      <th>sss</th>
      <th>ddd</th>
    </tr>
  </table>

</body>
</html>